In diesem Kapitel schauen wir uns das CSS Box-Modell an.

Das Box-Modell beschreibt die rechteckigen Blöcke oder Boxen, die im Elementbaum erzeugt und auf dem Bildschirm dargestellt werden. Es ist somit Grundlage jeden Layouts. Die vom Browser erzeugte Box wird durch Höhe und Breite, aber auch durch Innen- und Außenabstände sowie Rahmen festgelegt. Abstände und Rahmen können für jede der vier Seiten einer Box einzeln festgelegt werden. Der Begriff „Box“ ist nicht mit dem Begriff „Element“ gleichzusetzen. Nicht jedes Element erzeugt eine Box: Beispielsweise sind Dokument-Metadaten, Skript-Elemente und Style-Definitionen auch Elemente, sie erzeugen aber keine Box. Ein Span-Element hingegen erzeugt eine Box; das kann man erkennen, wenn man den Hintergrund beispielsweise gelb färbt. Boxen können auch erzeugt werden, wenn in einem Dokument kein Element als direktes Gegenstück existiert. Was bedeutet das? Um Lücken zu füllen oder spezielle Layoutregeln einzuhalten, kann der Browser zusätzliche, anonyme Boxen anlegen, für die es kein eigenes HTML-Tag gibt.

Eine Box kann bestehen aus: Dem Inhaltsbereich, also der Fläche, die durch Texte und Bilder oder Eigenschaften wie width und height vorgegeben wird, einem Innenabstand (padding), einem Rahmen (border) und einem Außenabstand (margin). Wird eine Box positioniert, so beginnt die linke Außenkante bei left, die obere Außenkante bei top, die rechte Außenkante bei right und die untere Außenkante bei bottom.

Hier sehen Sie eine solche Box mit den möglichen Einstellungen. Der Inhalt hat eine Breite und eine Höhe. Drum herum ist der Innenabstand zum Rahmen. Dann kommt der Rahmen selbst sowie ein Außenabstand um den Rahmen herum. Jede Seite (top, right, bottom, left) kann beliebig unabhängig voneinander eingestellt werden.

Die Ränder für die Box können per CSS festgelegt werden mit padding (Innenabstand), border (Breite des Rahmens) und margin (Außenabstand). Die vier Seiten können einzeln adressiert werden mit top (oben), right (rechts), bottom (unten) und left (links).

Statt die vier Seiten der Box explizit anzusprechen, kann man auch eine Kurzform verwenden (Stichwort: shorthand-Eigenschaften). Die Angaben werden beginnend bei top im Uhrzeigersinn notiert. Sie können stattdessen auch drei Angaben machen für top, left beziehungsweise right sowie bottom. Hier sehen Sie noch ein Beispiel für die shorthand und für die ausführliche Schreibweise.

Für Anfänger irritierend ist, dass mehrere Boxen nicht nebeneinander dargestellt werden, obwohl deren Gesamtbreite genau der Breite des Eltern-Elements entspricht. Dies liegt daran, dass alle Bestandteile einer Box addiert werden und nicht nur die Breiten-Summe width und Höhen-Summe height. Die Gesamtbreite errechnet sich stattdessen aus: margin-left plus border-left plus padding-left plus width plus padding-right plus border-right plus margin-right. Die Gesamthöhe einer Box wird ebenso errechnet aus margin-top plus border-top plus padding-top plus height plus padding-bottom plus border-bottom plus margin-bottom.

Hier sehen Sie einmal ein Beispiel einer Box mit Maßangaben. Wie breit und wie hoch ist denn jetzt diese Box in ihren Außenmaßen?

Diese Box ist hier einmal mit der gesamten Bemaßung angegeben: Margin, border, padding und width.

Wie man mit dem Inhalt einer solchen Box umgeht, kann man auch festlegen. Die Angabe der gewünschten Größe erfolgt ja mit width (Breite) und height (Höhe). Eine Angabe der maximalen und minimalen Größe ist auch möglich mit min-width und max-width beziehungsweise min-height und max-height. Overflow definiert, was passiert, wenn der Inhalt nicht zur Größe passt. Mit "visible" ragt der Inhalt über den Rand hinaus. Mit "hidden" wird der Inhalt am Rand abgeschnitten. Mit "scroll" wird der Inhalt verborgen, es gibt aber Scrollbalken. Mit "auto" entscheidet der Browser, wo Scrollbalken benötigt werden.

Hier sehen Sie ein Beispiel mit overflow gleich visible. Das ist in der Regel nicht so gewünscht.

Dies ist overflow gleich hidden. So kommt man aber nicht mehr an den restlichen Inhalt der Box heran.

Mit overflow gleich scroll werden Scrollbalken hinzugefügt.

Nun können Sie mit display noch festlegen, wie ein Element angezeigt werden soll. "none" bedeutet nicht anzeigen und auch keinen Platz dafür freihalten. "inline" heißt im laufenden Textfluss anzeigen. "block" bedeutet Block erzwingen, das heißt in neuer Zeile anzeigen. "list-item" ist wie block, aber mit Aufzählungszeichen davor. "run-in" bedeutet kontextabhängig als block oder inline darstellen. Die visibility legt fest, ob ein Element angezeigt wird. Mit "hidden" wird es nicht angezeigt, der Platz wird aber freigehalten. "visible" bedeutet anzeigen, das ist der default-Wert.

Hier sehen Sie eine rote Box mit dem Text "test" und display block.

Und hier sehen Sie dieselbe Box mit display inline.

Kommen wir abschließend noch zur Gestaltung des Rahmens. Mit border-color legen Sie die Rahmenfarbe fest. Eine Einschränkung auf eine Seite ist möglich über border-top-color, border-left-color und so weiter. Mit border-style legen Sie den Rahmenstil fest. "none" bedeutet kein Rahmen. "dotted" ist gepunktet, "dashed" gestrichelt, "solid" durchgezogen und "double" bedeutet doppelt durchgezogen. "inset und outset" bedeutet: Ein 3D-Effekt ist eingedrückt beziehungsweise hervorstehend. Auch hier funktioniert eine Einschränkung auf eine Seite über border-top-style, border-left-style und so weiter. Probieren Sie es aus!

Zum Schluss sehen Sie einmal ein paar CSS-Einstellungen für den Rahmen und was dabei herauskommt. Ihrer Kreativität sind mit CSS keine Grenzen gesetzt!